<style lang="scss" scoped>
	.container {
		background-color: #ffffff !important;
	}

	.imgs-box {
		padding: 0.2rem;
	}

	.upload-btn {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.del-img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0.2rem 0.3rem;
		text-align: right;
	}
</style>

<template>
	<div class="container hasNav">
		<van-nav-bar title="病历夹" left-arrow left-text="返回" @click-left="$router.back()" fixed>
			<template slot="right" v-if="fileList.length > 0">
				<van-uploader max-count="10" :after-read="afterRead">
					<van-icon name="plus" size=".4rem" />
				</van-uploader>
			</template>
		</van-nav-bar>

		<div v-if="!loading && fileList.length > 0" class="img-box">
			<van-collapse v-model="activeNames">
				<van-collapse-item v-for="(item,index) in fileList" :key="item.date+index" :title="item.date"
					:name="index">
					<van-grid :border="false">
						<van-grid-item v-for="(el,i) in item.medicals" :key="i">
							<van-image width="1.2rem" height="1.2rem" fit="cover" :src="fileUrl+el.imagesPath"
								@click="imagePreview(index,i)" />
						</van-grid-item>
					</van-grid>
				</van-collapse-item>
			</van-collapse>
		</div>

		<van-uploader v-if="!loading && fileList.length === 0" class="upload-btn" max-count="10" accept="image/*"
			:after-read="afterRead">
			<van-button type="default" color="#179AFE" block>上传病历图片</van-button>
		</van-uploader>

		<!-- 图片预览 -->
		<van-image-preview v-model="imgPreview" :images="previewImages" :start-position="activeImgIndex"
			@change="changeImg" @closed="closePreview">
			<template slot="cover">
				<div class="del-img">
					<van-button type="default" color="#179AFE" size="small" @click="delImg">删除</van-button>
				</div>
			</template>
		</van-image-preview>

		<Loading :isShow="loading"></Loading>
	</div>
</template>

<script>
	import Loading from '../../components/Loading';

	import {
		fileUrl
	} from '../../api/index';
	import {
		getMedicalRecordList,
		addMedicalRecord,
		delMedicalRecord
	} from '../../api/order';

	export default {
		name: 'Upload',
		components: {
			Loading
		},
		data() {
			const {
				id
			} = this.$route.query;

			return {
				loading: true,
				fileUrl,
				id,
				maxSize: 10 * 1024 * 1024,
				activeNames: [0],
				fileList: [],
				imgPreview: false,
				previewImages: [],
				activeParentIndex: 0,
				activeImgIndex: 0,
				activeImgId: ''
			};
		},
		async beforeMount() {
			await this.getImgList();
		},
		methods: {
			async getImgList() {
				try {
					const {
						errorcode,
						errormsg,
						medicalrecords
					} = await getMedicalRecordList({
						recordId: this.id
					});

					if (errorcode == 0) {
						this.fileList = medicalrecords;

						this.$nextTick(() => {
							this.loading = false;
						});
					} else {
						this.$toast(errormsg);
					}
				} catch (error) {
					console.log(error);
				}
			},
			//校验图片文件大小并上传
			async afterRead({
				file
			}) {
				if (file && file.size <= this.maxSize) {
					this.loading = true;

					let formData = new FormData();

					formData.append('recordId', this.id);
					formData.append('images', file);

					const {
						errorcode,
						errormsg
					} = await addMedicalRecord(formData);

					if (errorcode == 0) {
						this.$toast('上传成功');
						this.getImgList();

						this.$nextTick(() => {
							this.loading = false;
						});
					} else {
						this.$toast(errormsg);
						this.loading = false;
					}
				} else {
					this.$toast('请上传正确大小的图片!');
				}
			},
			//预览图片
			imagePreview(parentIndex, index) {
				this.activeParentIndex = parentIndex;
				this.activeImgIndex = index;
				this.activeImgId = this.fileList[parentIndex].medicals[index].medicalId;
				this.previewImages = this.fileList[parentIndex].medicals.map(item => {
					return this.fileUrl + item.imagesPath;
				});

				this.imgPreview = true;
			},
			changeImg(index) {
				this.activeImgId = this.fileList[this.activeParentIndex].medicals[index].medicalId;
			},
			closePreview() {
				(this.previewImages = []), (this.activeParentIndex = 0), (this.activeImgId = '');
			},
			delImg() {
				this.$dialog({
						title: '提示',
						message: '是否确认删除',
						confirmButtonColor: '#179afe',
						showCancelButton: true
					})
					.then(async () => {
						try {
							const {
								errorcode,
								errormsg
							} = await delMedicalRecord({
								medicalId: this.activeImgId
							});

							if (errorcode == 0) {
								this.$toast('删除成功');
								this.imgPreview = false;
								this.getImgList();
							} else {
								this.$toast(errormsg);
							}
						} catch (error) {
							console.log(error);
						}
					})
					.catch(() => {});
			}
		}
	};
</script>
